﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery带搜索功能下拉框多选代码</title>

<!--图标和默认样式-->
<!-- <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"> -->

<!--核心样式-->
<link href="css/ySelect.css" rel="stylesheet" type="text/css">

<script src="js/jquery-1.11.3.min.js"></script>

<script src="js/ySelect.js"></script>

</head>
<body>
<div class="container">
<select id='m1' class="demo" multiple="multiple">
    <optgroup label="产品">
        <option value="1">加多宝凉茶</option>
        <option value="2">饮料</option>
        <option value="3">太太乐鸡精</option>
        <option value="4">嘉士伯啤酒</option>
    </optgroup>
    <optgroup label="字典">
        <option value="5">成功图像类型</option>
        <option value="6">门店类型</option>
        <option value="7">终端类型</option>
    </optgroup>
</select>

<select id='m2' class="demo1" multiple="multiple" >
        <option value="1">加多宝凉茶</option>
        <option value="2">饮料</option>
        <option value="3">太太乐鸡精</option>
        <option value="4">嘉士伯啤酒</option>
        <option value="5">成功图像类型</option>
        <option value="6">门店类型</option>
</select>
<br/>
<button id="current" class="btn btn-primary btn-sm">查看值</button>
</div>

<script>
$(function() {
        $('.demo').ySelect();
        $('.demo1').ySelect(
          {
            placeholder: '请先选择一些项目',
            searchText: '搜索',
            showSearch: true,
            numDisplayed: 4,
            overflowText: '已选中 {n}项',
            isCheck:false
          }
        );

      $("#current").click(function(){
        alert($("#m1").ySelectedValues(","));
        alert($("#m1").ySelectedTexts(","));
      });

});
</script>

</div>
</body>
</html>